<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备信息">
              <j-dict-select-tag
                placeholder="请选择设备名称"
                v-model="queryParam.deviceNum"
                dictCode="zwgl_qxxx,distinct device_key,device_key"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="时间">
              <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.startDate"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.endDate"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <a-row>
      <a-col :span="24">
        <!-- <div class="proCharts" id="chartsData"></div> -->
        <div class="proCharts" id="chartsDatas"></div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'comparativeAnalysis',
  components: {},
  data() {
    return {
      loading: true,
      height: 420,
      title: '',
      xData: ['空气温度', '空气湿度', '大气压力', '日雨量', '光照强度', '二氧化碳浓度'], //横坐标
      yData: [], //数据
      queryParam: { deviceKey: '', startDate: '', endDate: '' },
    }
  },
  created() {},
  mounted() {},
  methods: {
    searchReset() {
      this.queryParam.startDate = ''
      this.queryParam.endDate = ''
    },
    searchQuery() {
      if (!this.queryParam.deviceNum) {
        this.$message.warn('请选择设备信息')
      } else {
        this.initLogInfo(this.queryParam.deviceNum)
      }
    },
    initLogInfo(deviceKey, id) {
      let that = this
      getAction('/modules/zwglQxxx/findEnvironmentChartData', {
        deviceKey: deviceKey,
        id: id,
        startDate: that.queryParam.startDate,
        endDate: that.queryParam.endDate,
      }).then((res) => {
        //that.mychartsNow(res.result.zt, that)
        that.mychartsHis(res.result.xt, that)
      })
    },
    mychartsNow(mDatas, that) {
      that.yData = []
      that.yData.push(mDatas['airTemperature'] ? mDatas['airTemperature'] : 0)
      that.yData.push(mDatas['airHumidity'] ? mDatas['airHumidity'] : 0)
      that.yData.push(mDatas['barometricPressure'] ? mDatas['barometricPressure'] : 0)
      that.yData.push(mDatas['dailyRainfall'] ? mDatas['dailyRainfall'] : 0)
      that.yData.push(mDatas['illuminance'] ? mDatas['illuminance'] : 0)
      that.yData.push(mDatas['co2'] ? mDatas['co2'] : 0)
      that.mychartsNowBack()
    },
  
    mychartsHis(mDatas, that) {
      let myChart = that.$echarts.init(document.getElementById('chartsDatas'))
      let legendData = [
        {
          name: '空气湿度',
          // textStyle: {
          //   color: '#fff'
          // }
        },
        {
          name: '空气温度',
          // textStyle: {
          //   color: '#fff'
          // }
        },
        {
          name: '大气压力',
          // textStyle: {
          //   color: '#fff'
          // }
        },
        {
          name: '光照强度',
          // textStyle: {
          //   color: '#fff'
          // }
        },
        {
          name: '二氧化碳浓度',
          // textStyle: {
          //   color: '#fff'
          // }
        },
       
      ]
      let xAxisData = []
      var seriesData = [
        {
          name: '空气湿度',
          type: 'line',
          data: [],
          lineStyle: {
            color: 'rgb(8,252,7)', //线的颜色
          },
        },
        {
          name: '空气温度',
          type: 'line',
          data: [],
          lineStyle: {
            color: 'rgb(255,168,0)', //线的颜色
          },
        },
        {
          name: '大气压力',
          type: 'line',
          data: [],
          lineStyle: {
            color: 'rgb(26,175,222)', //线的颜色
          },
        },
        {
          name: '光照强度',
          type: 'line',
          data: [],
          lineStyle: {
            color: 'rgb(222,26,74)', //线的颜色
          },
        },
        {
          name: '二氧化碳浓度',
          type: 'line',
          data: [],
          lineStyle: {
            color: 'rgb(126,21,207)', //线的颜色
          },
        },
      ]

      for (var i = 0; i < mDatas.length; i++) {
        xAxisData.push(mDatas[i]['type'])
        seriesData[0].data.push(mDatas[i]['air_temperature'])
        seriesData[1].data.push(mDatas[i]['air_humidity'])
        seriesData[2].data.push(mDatas[i]['barometric_pressure'])
        seriesData[3].data.push(mDatas[i]['illuminance'])
        seriesData[4].data.push(mDatas[i]['co2'])
      }
      let option = {
        color: ['rgb(8,252,7)', 'rgb(255,168,0)','rgb(26,175,222)','rgb(222,26,74)','rgb(126,21,207)'],
        title: {
          text: '',
        },
        tooltip: {
          //提示框
          trigger: 'axis',
        },
        legend: {
          //图例的类型
          icon: 'roundRect', //图例icon图标
          data: legendData,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category', //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: xAxisData,
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              //color: '#fff',
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: 'rgb(2,121,253)',
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          name: '对比分析',
          axisLabel: {
            //x轴的坐标文字
            show: true,
            // textStyle: {
            //   color: '#fff' //文字的颜色
            // }
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            // lineStyle: {
            //   color: 'rgb(2,121,253)'
            // }
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: ['#153a8a'],
            },
          },
        },
        series: seriesData,
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.proCharts {
  width: 100%;
  height: 400px;
}
</style>
